import 'package:flutter/material.dart';
import 'package:lesson1/models/doctor.dart';

class DetailPages extends StatefulWidget {
  final DoctorModel doctorModel;
  const DetailPages({
    required this.doctorModel,
    super.key
  });

  @override
  State<DetailPages> createState() => _DetailPagesState();
}

class _DetailPagesState extends State<DetailPages> {
  List<CalendarModel> calendarData = [];
  List<TimeModel> timeData = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    calendarData = widget.doctorModel.calendar;
    timeData = widget.doctorModel.times;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      /// 设置顶部导航栏
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        toolbarHeight: 100,   /// 设置向上高度
        leadingWidth: 100,    /// 设置向左宽度
        title: Text("Detail Doctor"),
        leading: IconButton(
            onPressed: () => {Navigator.pop(context)},  /// 返回上一页
            icon: Container(
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(14),
                boxShadow: [
                  BoxShadow(
                    color: Color(0xff050618).withOpacity(0.06),
                    offset: Offset(0, 4),
                    blurRadius: 25,
                  )
                ],
              ),
              child: Icon(
                Icons.chevron_left,
                size: 28,
              ),
            )),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            info(),
            calendar(),
            const SizedBox(height: 30,),
            time(),
            Spacer(),
            bookButton(),
          ],
        ),
      ),
    );
  }

  /// 信息
  Widget info() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: 100,
          child: Row(
            children: [
              Container(
                width: 105,
                decoration: BoxDecoration(
                    color: widget.doctorModel.imageBox,
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                        alignment: Alignment.bottomCenter,
                        image: AssetImage(widget.doctorModel.image)
                    )
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(12),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.doctorModel.name,
                      style: const TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 16
                      ),
                    ),
                    Text(
                      widget.doctorModel.specialties.first,
                      style: const TextStyle(
                          fontWeight: FontWeight.w300,
                          fontSize: 12
                      ),
                    ),
                    const Spacer(),
                    Row(
                      children: [
                        const Icon(
                          Icons.star,
                          color: Colors.amber,
                          size: 18,
                        ),
                        const SizedBox(width: 5, ),
                        Text(
                          widget.doctorModel.score.toString(),
                          style: const TextStyle(
                              fontWeight: FontWeight.w300,
                              fontSize: 12
                          ),
                        )
                      ],
                    )
                  ],
                ),
              )
            ],
          ),
        ),
        const SizedBox(height: 10,),
        const Text(
          'Biography',
          style: TextStyle(
              color: Color(0xff09121C),
              fontWeight: FontWeight.w300
          ),
        ),
        const SizedBox(height: 10,),
        Text(
          widget.doctorModel.bio,
          style: TextStyle(
              color: const Color(0xff09121C).withOpacity(0.5),
              fontWeight: FontWeight.w300,
              fontSize: 12
          ),
        ),
        const SizedBox(height: 20,),
        const Text(
          'Specialities',
          style: TextStyle(
              color: Color(0xff09121C),
              fontWeight: FontWeight.w300
          ),
        ),
        const SizedBox(height: 10,),
        SizedBox(
          height: 50,
          child: ListView.separated(
            itemBuilder: (context, index) {
              return Text(
                widget.doctorModel.specialties[index],
                style: const TextStyle(
                    color: Color(0xff09121C),
                    decoration: TextDecoration.underline,
                    fontWeight: FontWeight.w300,
                    fontSize: 12
                ),
              );
            },
            separatorBuilder: (context, index) => const SizedBox(width: 10,),
            itemCount: widget.doctorModel.specialties.length,
            scrollDirection: Axis.horizontal,
          ),
        )
      ],
    );
  }

  /// 日历
  Widget calendar() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Calendar',
          style: TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: 16
          ),
        ),
        const SizedBox(height: 20,),
        SizedBox(
          height: 50,
          child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: (){
                    for(var item in calendarData){
                      item.isSelected = false;
                    }
                    calendarData[index].isSelected = true;
                    setState(() {});
                  },
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: calendarData[index].isSelected ?
                        const Color(0xff51A8FF) : Colors.white,
                        boxShadow: [
                          BoxShadow(
                            offset: const Offset(0, 4),
                            blurRadius: 25,
                            color: calendarData[index].isSelected?
                            const Color(0xff51A8FF).withOpacity(0.45) :
                            const Color(0xff050618).withOpacity(0.05),
                          )
                        ]
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          calendarData[index].dayNumber.toString(),
                          style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: 12,
                              color: calendarData[index].isSelected ?
                              Colors.white : Colors.black
                          ),
                        ),
                        Text(
                          calendarData[index].dayName,
                          style: TextStyle(
                              fontWeight: FontWeight.w200,
                              fontSize: 12,
                              color: calendarData[index].isSelected ?
                              Colors.white : Colors.black
                          ),
                        )
                      ],
                    ),
                  ),
                );
              },
              separatorBuilder: (context, index) => const SizedBox(width: 50,),
              itemCount: calendarData.length
          ),
        )
      ],
    );
  }

  /// 预约时间
  Widget time() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "Time",
          style: TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: 18
          ),
        ),
        SizedBox(height: 20,),
        /// 时间
        SizedBox(
          height: 40,
          child: ListView.separated(
            itemBuilder: (context, index) {
              return GestureDetector(
                onTap: () => {
                  setState(() {
                    for(var item in timeData) { item.isSelected = false; }
                    timeData[index].isSelected = true;
                  })
                },
                child: Container(
                  width: 80,
                  height: 40,
                  decoration: BoxDecoration(
                    color: timeData[index].isSelected ? Color(0xff51A8FF) : Colors.white,
                    borderRadius: BorderRadius.circular(40),
                    boxShadow: [
                      BoxShadow(
                        offset: Offset(0, 4),
                        blurRadius: 25,
                        color: timeData[index].isSelected ? Color(0xff51A8FF).withOpacity(0.45) : Color(0xff050618).withOpacity(0.05),
                      )
                    ]
                  ),
                  child: Center(
                    child: Text(
                      timeData[index].time,
                      style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w400,
                        color: timeData[index].isSelected ? Colors.white : Colors.black,
                      ),
                    ),
                  ),
                ),
              );
            },
            separatorBuilder: (context, index) => const SizedBox(width: 60,),
            itemCount: timeData.length,
            scrollDirection: Axis.horizontal,   /// 水平滚动
          ),
        )
      ],
    );
  }

  /// 预约按钮
  Widget bookButton() {
    return MaterialButton(
      onPressed: () => {},
      height: 55,
      minWidth: double.infinity,
      color: Color(0xff51A8FF),
      shape: RoundedRectangleBorder(   /// RoundedRectangleBorder 是圆角矩形
        borderRadius: BorderRadius.circular(50)
      ),
      child: Text(
        "Book Appointment",
        style: TextStyle(
          fontSize: 16,
          color: Colors.white,
        ),
      ),
    );
  }
}
